<template>
  <div class="container">
    <el-dialog title="题目浏览" :visible="dialogVisible" width="800px">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="title">[题型]:{{ list.questionType | question }}</div>
            <div class="title">[学科]:{{ list.subjectName }}</div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="title">[编号]:{{ list.id }}</div>
            <div class="title">[目录]:{{ list.directoryName }}</div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="title">[难度]:{{ list.difficulty | Question }}</div>
            <div class="title">[方向]:{{ list.direction }}</div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="title">[标签]:{{ list.tags }}</div>
            <!-- <div class="title">[题型]:</div> -->
          </div></el-col
        >
      </el-row>
      <div class="line"></div>
      <div class="stem">
        <div class="ti">[题干]: <span v-html="list.question" class="sp">question</span></div>
        <div>{{ list.questionType | question }} 选项:(以下选中的项为正确答案)</div>
        <!-- 单选 -->
        <el-radio-group v-model="radio" v-if="list.questionType === '1'">
          <div class="radio" v-for="item in list.options" :key="item.id">
            <el-radio :label="item.id">{{ item.title }}</el-radio>
          </div>
        </el-radio-group>
        <!-- 多选  -->
        <el-checkbox-group v-model="checkList" v-else-if="list.questionType === '2'">
          <div class="radio" v-for="item in list.options" :key="item.id">
            <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <div class="line"></div>
      <div>
        <div class="answer">
          参考答案:<el-button type="danger" size="small" @click="a = true"> 视频答案及浏览</el-button>
        </div>
        <!-- 视频插件 -->
        <div class="video" v-if="a">
          <video :src="list.videoURL" controls="controls"></video>
        </div>
      </div>
      <div class="line"></div>
      <div>答案解析: <span v-html="list.answer">answer</span></div>
      <div class="line"></div>
      <div>题目备注:<span v-html="list.remarks">remarks</span></div>
      <span slot="footer" class="dialog-footer en">
        <el-button type="primary" @click="end">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: ['dialogVisible'],
  data() {
    return {
      // 多选框选项
      checkList: [],
      // 单选框选项
      radio: '',
      list: {
        difficulty: 1,
        questionType: 1
      },
      // 控制视频显示与隐藏
      a: false
    }
  },
  methods: {
    end() {
      this.$emit('update:dialogVisible', false)
      this.a = false
    },
    async getlist(data) {
      const res = await detail(data)
      console.log(res)
      this.list = res.data
      // 单选 选中
      // 判断是不是单选
      if (res.data.questionType == 1) {
        // 找出选中的选项
        const b = res.data.options.find(item => {
          return item.isRight == 1
        })
        // 将选中的选项保存到<el-radio-group> v-model绑定的值中
        this.radio = b.id
        // 多选 选中
        // 判断是不是多选
      } else if (res.data.questionType == 2) {
        // 循环遍历,将多选选中的值保存到 <el-checkbox-group> v-model绑定的值中
        res.data.options.forEach(item => {
          if (item.isRight == 1) {
            this.checkList.push(item.id)
          }
        })
      }

      if (res.data.questionType === '1') {
        console.log('简单')
      }
      // questionType:
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .answer {
    margin-bottom: 10px;
  }
  video {
    width: 400px;
    height: 300px;
  }

  .line {
    border-top: 1px solid rgb(92, 90, 90);
    margin-bottom: 20px;
  }
  .stem {
    // background-color: pink;
    .ti {
      margin: 10px 0px;
      .sp {
        color: blue;
      }
    }
    .radio {
      margin: 10px 0px;
    }
  }

  .title {
    margin-bottom: 25px;
    font-size: 16px;
  }
}
</style>
